<template>
    <div class="index-wrapper">
      <v-header page="index"></v-header>
      <div class="banner-wrapper">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="banner-img" src="./banner01.png" width="100%" data-path="name"/>
            </div>
            <div class="swiper-slide">
              <img class="banner-img" src="./banner02.png" width="100%" data-path="layout"/>
            </div>
          </div>
          <!-- Add Pagination  -->
          <div class="swiper-pagination" ref="paginations"></div>
        </div>
      </div>
      <div class="main-wrapper">
        <div class="main-item">
          <div class="item-left-img name-lucky-img inline"></div>
          <div class="item-right-desc inline">
            <p class="item-title name-lucky-title"></p>
            <div class="item-desc tj">姓名本质上有物质和超物质属性，蕴含阴阳、五行之规律，蕴藏着人的精气神，受宇宙万物运行法则...</div>
            <span class="fr" @click="goPath('name')">了解更多>></span>
          </div>
        </div>
        <div class="main-item">
          <div class="item-left-img inline fengshui-img"></div>
          <div class="item-right-desc inline">
            <p class="item-title fengshui-title"></p>
            <div class="item-desc tj">风水是中华民族历史悠久的传统文化之一，旧称地理堪舆，隶属于易经，是中华民族古圣先贤智慧的结晶...</div>
            <span class="fr" @click="goPath('layout')">了解更多>></span>
          </div>
        </div>
        <div class="team-introduce-wrapper pr">
          <div class="team-introduce-title pa tc">团队介绍</div>
          <div class="top-introduce">
            <p class="master-name tc">俞老师</p>
            <p class="master-desc tc">俞继韬·姓名气运学开创者</p>
          </div>
          <div class="bottom-introduce">
            <p class="master-name ">易云老师</p>
            <p class="master-desc tj">姓名陶陶，女，号易云，出生于丙辰年，天师道第27代传人。</p>
            <p class="master-name">郑建龙老师</p>
            <p class="master-desc tj">王姓名郑建龙，男，出生于癸丑年，师从杨公祖师第38代传人，擅长房屋风水布局。</p>
          </div>
          <div class="more-wrapper pa tc" @click="goAbout('team')"></div>
        </div>
      </div>
      <v-footer></v-footer>
    </div>
</template>

<script>
    import Header from '@/components/header/Header'
    import Footer from '@/components/footer/Footer'
    import Swiper from "swiper"
    import "swiper/dist/css/swiper.min.css"

    export default {
      name: "Index",
      data(){
        return{

        }
      },
      methods:{
        initSwiper(){
          let _this = this;
          let mySwiper = new Swiper('.swiper-container', {
            loop: true,
            pagination: ".swiper-pagination",
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            onTap: function(swiper, e) {
              _this.goPath(e.target.dataset.path);
            }
          })
        },
        goPath(path){
          this.$router.push({path:path});
        },
        goAbout(anchor){
          this.$router.push({ name: 'about', params: { anchor: anchor }});
        }
      },
      components:{
        "v-header":Header,
        "v-footer":Footer
      },
      mounted(){
        this.initSwiper();
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .index-wrapper
    .main-wrapper
      padding 30px
      margin-bottom 15px
      .main-item
        font-size 0
        margin-bottom 18px
        .item-left-img
          width 240px
          height 176px
          &.name-lucky-img
            background url("./left01.png") no-repeat center center
            background-size cover
          &.fengshui-img
            background url("./left02.png") no-repeat center center
            background-size cover
        .item-right-desc
          width 416px
          padding-top 15px
          margin-left 34px
          .item-title
            width 198px
            height 26px
            &.name-lucky-title
              background url("./title01.png") no-repeat center center
              background-size cover
            &.fengshui-title
              width 227px
              height 30px
              background url("./title02.png") no-repeat center center
              background-size cover
          .item-desc
            font-size 24px
            line-height 28px
            color #828282
            margin-top 15px
          span
            color #e60012
            font-size 20px
            margin-top 10px
      .team-introduce-wrapper
        margin-top 40px
        .team-introduce-title
          width 160px
          height 36px
          background #d1ad77
          line-height 36px
          color #ffffff
          font-size 20px
          top -10px
          left 265px
        .top-introduce
          width 690px
          height 351px
          background url("./yu-bg.png") no-repeat center center
          background-size cover
          .master-name
            font-size 36px
            padding-top 60px
          .master-desc
            font-size 32px
            margin-top 5px
        .bottom-introduce
          padding 20px 40px 5px 40px
          background #f3f3f3
          .master-name
            font-size 28px
            margin-bottom 10px
          .master-desc
            font-size 24px
            color #828282
            line-height 36px
            margin-bottom 25px
        .more-wrapper
          width 40px
          height 140px
          right 0
          bottom 295px
          background url("./more.png") no-repeat center center
          background-size cover
          img
            width 19px
            margin-top 54px
</style>
